<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>工具</title>
    <link rel="shortcut icon" href="/public/favicon.ico" type="image/x-icon">
    <!-- 引入 Bootstrap -->
    <link href="/public/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <style>
        .input-group-addon {
            cursor: pointer;
        }
        .input-group{
            margin-top: 15px;
        }
        .btn{
            margin-right: 15px;
        }
    </style>
</head>
<body>
<div id="root">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-md-5">
                <div style="padding: 25px;">
                    <h4>MD5 加密:</h4>
                    <form class="bs-example bs-example-form" role="form">
                        <div class="input-group">
                            <span class="input-group-addon">字符串</span>
                            <input type="text" class="form-control" placeholder="字符串..." v-model="s">
                        </div>
                        <div class="input-group">
                            <input type="text" class="form-control" v-model="key">
                            <span class="input-group-addon btn-success">生成</span>
                        </div>
                        <div class="input-group">
                            <div class="btn btn-default" v-for="item in keys" @click="changeKey(item)">{{item}}</div>
                        </div>
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="结果..." v-model="ens">
                            <span class="input-group-addon btn-danger">小写</span>
                        </div>
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="结果..." v-model="ENS">
                            <span class="input-group-addon btn-warning">大写</span>
                        </div>
                    </form>
                </div>
            </div><!-- /.col-lg-6 --><br>
        </div><!-- /.row -->
    </form>
</div>

<!-- 引入 md.js -->
<script src="/public/js/md5.js"></script>
<!-- 引入 vue.js -->
<script src="/public/js/vue.min.js"></script>
<script>
    new Vue({
        el: "#root",
        data: {
            s: "1",
            key: "&*(h}*&HIU",
            keys: ["&*(h}*&HIU", "uWwjeEKsri"]
        },
        computed: {
            ens: function () {
                return hex_md5(this.s + this.key);
            },
            ENS: function () {
                return hex_md5(this.s + this.key).toUpperCase();
            }
        },
        methods: {
            changeKey: function (key) {
                this.key = key;
            }
        }
    });
</script>
</body>
</html>